<template>
  <div v-if="app" class="aid-app">
    <a :href="appUrl" class="app-item" @click="handleClick">
      <img :src="app.icon" :alt="app.name">
      <div class="app-info">
        <div class="app-name">{{ app.name }}</div>
        <div class="app-category">{{ app.category }}</div>
        <div class="app-rating">
          {{ app.rating }}
          <div class="icon">★</div>
        </div>
      </div>
      <div class="get">GET</div>
    </a>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { homeParams } from '~/utils/homeParams'

const route = useRoute()
const app = ref(null)
const appUrl = ref('')

const findAppBySlug = async (slug) => {
  try {
    const response = await fetch(`/api/apps/find?slug=${encodeURIComponent(slug)}`)
    if (!response.ok) {
      throw new Error('Failed to fetch app data')
    }
    const data = await response.json()
    return data.app || null
  } catch (error) {
    console.error('Error finding app:', error)
    return null
  }
}

const getDetailUrl = (item) => {
  const queryParams = {
    type: 'apps',
    slug: item.slug,
    ...homeParams()
  }
  return `/details?${new URLSearchParams(queryParams).toString()}`
}

const handleClick = () => {
  if (app.value) {
    logEvent('Click_APP', {
      Subzone: 'Aid App',
      App: app.value.name,
    })
  }
}

onMounted(async () => {
  const aid = route.query.aid
  if (aid) {
    const foundApp = await findAppBySlug(aid)
    if (foundApp) {
      app.value = foundApp
      appUrl.value = getDetailUrl(foundApp)
    }
  }
})
</script>

<style scoped lang="scss">
.aid-app {
  margin: 1rem 0;
  padding: 1rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0px 2px 12px 0px #F78B17;
  border: 2px solid #F78B17;

  .app-item {
    text-decoration: none;
    color: inherit;
    display: flex;
    gap: 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    align-items: center;
    cursor: pointer;

    &:hover {
      background-color: #f5f5f5;
    }

    img {
      width: 4rem;
      height: 4rem;
      border-radius: 1rem;
      object-fit: cover;
      background-image: url('/img/default.png');
      background-size: 4rem 4rem;
      background-position: center;
    }

    .app-info {
      display: flex;
      flex-direction: column;
      gap: .1rem;
      flex: 1;

      .app-name {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
        font-weight: 500;
        overflow: hidden;
        width: 9rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-category {
        font-size: .7rem;
        color: #666666;
      }

      .app-rating {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        color: #F75867;

        .icon {
          color: #666;
          margin-left: 0.25rem;
        }
      }
    }

    .get {
      border-radius: 1rem;
      border: 1px solid #F78B17;
      color: #fff;
      background: #F78B17;
      padding: 0.2rem 1.2rem;
      /* 持续放大缩小 */
      animation: scale 2s infinite;
      @keyframes scale {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
      }
    }
  }
}
</style> 